<template>
  <!-- 模板内容：只能有一个div  -->
  <div class="slide">
    <!-- 滑动内容板块 -->
      <div class="slide_son">
        <ul>
          <li>分 类<span>></span></li>
          <li>书 单<span>></span></li>
          <li>免 费<span>></span></li>
          <li>男生小说<span>></span></li>
          <li>女生小说<span>></span></li>
          <li>新 书<span>></span></li>
          <li>听 书<span>></span></li>
          <li>有声剧<span>></span></li>
        </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Slide",
};
</script>

<style scoped>
/* css样式 */
.slide {
  width: 7.5rem;
  /* height: 6.67rem; */
 
}
.slide_son {
  width: 100%;
  height: 1rem;
  line-height: .65rem;
  overflow: auto;
  scrollbar-width: none;
  margin-left: .2rem;
  margin-top: 0.2rem;
}
.slide_son::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
ul {
  width: 200%;
  /* height: 100%; */
  display: flex;
  /* overflow-x:scroll; */
  justify-content: space-around;
}
li {
  /* width: 5rem; */
  padding:0 .25rem ;
  /* margin: 0.1rem; */
  height: 100%;
  line-height: 0.65rem;
  background: #dcdcdc;
  color:#000;
  text-align: center;
  font-size: 0.24rem;
  border-radius: 0.3rem;
}
span {
  font-size: 0.3rem;
  padding-left: 0.1rem;
  color: gray;
  text-align: center;
}
</style>